<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>React practice</title>
  <script src="../../../../static/lib/react/react.development.js"></script>
  <script src="../../../../static/lib/react/react-dom.development.js"></script>
  <script src="../../../../static/lib/jquery/jquery-3.4.1.min.js"></script>

  <!-- Don't use this in production: -->
  <script src="../../../../static/lib/react/babel.js"></script>
  <style>
    .pic-list {
      display: flex;
      flex-flow: row wrap;
      align-items: flex-end;
      background: black;
    }

    .pic-item {
      display: inline-block;
      border-radius: 12px;
      border: 4px solid white;
      margin: 8px;
      transition: transform 1s ease-in-out;
    }

    .pic-item.modal-item {
      position: absolute;
      transform-origin: top left;
    }

    .pic-item:hover {
      outline: 2px solid rgb(178, 209, 238);
      cursor: pointer;
    }

    .modal-container {
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      background: #00000038;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <div id="FLIP"></div>
  <script type="text/babel" src="./PageReact/FLIP.tsx"> </script>
  <div id="hook"></div>
  <script type="text/babel" src="./PageReact/Hook.tsx"> </script>
  <div id="renderProps"></div>
  <script type="text/babel" src="./PageReact/RenderProps.tsx"> </script>
  <div id="hoc"></div>
  <script type="text/babel" src="./PageReact/hoc.tsx"> </script>
  <div id="root"></div>
  <script type="text/babel" src="./PageReact/main.tsx"> </script>
  <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html

      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
</body>

</html>